<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
        <title>开元大灌篮</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app" class="app">
            <!-- 头部 -->
            <header class="index_header">
                <!-- 左边 -->
                <div class="header_left">
                    <img class="header_peopleImage" :src=index.peopleImage alt="">
                    <h3 class="header_peopleName">{{index.peopleName}}</h3>
                </div>
                <!-- 用户id和金币房卡 -->
                <div class="header_cent">
                    <!-- 用户id -->
                    <h3 class="header_peopleId">id:{{index.peopleId}}</h3>
                    <!-- 用户金币 -->
                    <h3 class="header_peopleMoney">{{index.peopleMoney}}</h3>
                    <!-- 金币充值按钮 -->
                    <img class="header_MoneyAdd" src="image/add.png" alt="" @click='indexShoping'>
                    <!-- 用户房卡 -->
                    <h3 class="header_peopleRoomCard">{{index.peopleRoomCard}}</h3>
                    <!-- 房卡充值按钮 -->
                    <img class="header_RoomCard" src="image/add.png" alt="" @click='indexShoping'>
                </div>
                <!-- 右边导航 -->
                <div class="header_right">
                    <!-- 排行 -->
                    <img src="image/paih.png" alt="">
                    <!-- 分享 -->
                    <img src="image/fenx.png" alt="">
                    <!-- 设置 -->
                    <img src="image/shezhi.png" alt="">
                </div>
            </header>
            <!-- 中间内容 -->
            <section class="index_cont">
                <!-- 消息弹窗 -->
                <marquee class="index_cont_mar"> 欢迎关注大灌篮,欢迎关注大灌篮,欢迎关注大灌篮</marquee>
                <img src="image/lab.png" alt="" class="index_cont_marImage">
                <!-- 公告 -->
                <div class="index_cont_placard">
                    <h3>休闲使用</h3>
                    <h3>游戏问题请联系微信公众号{{index.peopleWeixin}}</h3>
                </div>
                <div class="index_cont_Cbor">
                    <!-- 金币场 -->
                    <img class="index_cont_MoneyC" src="image/jinbichang.png" alt="" @click='indexJinbi'>
                    <!-- 房卡场 -->
                    <img class="index_cont_RoomC" src="image/fangkachang.png" alt="" @click='indexFangka'>
                </div>
            </section>
            <!-- 底部 -->
            <footer class="index_footer">
                <!-- 商城 -->
                <img src="image/sc.png" alt="" @click='indexShoping'>
                <!-- 代理 -->
                <img src="image/dail.png" alt="" @click='indexAgency'>
                <!-- 公告 -->
                <img src="image/gg.png" alt="" @click='indexBulletin'>
                <!-- 战绩 -->
                <img src="image/zj.png" alt="" @click='indexMilitary'>
                <!-- 帮助 -->
                <img src="image/bz.png" alt="" @click='indexHelp'>
            </footer>
            <!-- 黑色背景 -->
            <div class="bor" v-show="index.bor == 1" :class="{'bj':isBj}">

            </div>

            <!-- 金币场 -->
            <div class="index_jinbiC" v-show="isJinbiSelect">
                    <img class="index_close" style="width:7%;" src="image/fh.png" @click='indexClose' alt="" >
                <div class="index_jinbiC_bor" v-for="item in jinbiC">
                    <img :src=item.img alt="" @click='indexJinMoneyC(item.money)'>
                    <span>{{item.peo}}</span>
                </div>
                <!-- 快速加入 -->
                <img class="JinbiQuick" src="image/jinbi/ksks.png" alt="" @click='indexJinbiQuick'>
            </div>
            <!--房卡场  -->
            <div class="index_RoomC" v-show="isRoomSelect">
                <img class="index_close" style="width:7%;" src="image/X.png" @click='indexClose' alt="" >
                <h4 class="index_RoomC_h4">请输入房间号加入房间</h4>
                <!-- 房间号 -->
                <!-- <div > -->
                    <input class="index_RoomC_Num" type="text" v-model="RoomNumber"readonly="readonly" >
                <!-- </div> -->
                <!-- 输入框 -->
                <div class="okey">
                    <span id="1" @click="indexCounter(1)">1</span>
                    <span id="2" @click="indexCounter(2)">2</span>
                    <span id="3" @click="indexCounter(3)">3</span>
                    <span id="4" @click="indexCounter(4)">4</span>
                    <span id="5" @click="indexCounter(5)">5</span>
                    <span id="6" @click="indexCounter(6)">6</span>
                    <span id="7" @click="indexCounter(7)">7</span>
                    <span id="8" @click="indexCounter(8)">8</span>
                    <span id="9" @click="indexCounter(9)">9</span>
                    <span id="0" @click="indexCounter(0)">0</span>
                    <span @click='clearNum'>重输</span>
                    <span @click='tuiGe'>删除</span>
                </div>
                <!-- 底部 -->
                <div class="index_RoomFotter">
                    <!-- 新建房间 -->
                    <img src="image/fangka/new.png" alt="">
                    <!-- 加入房间 -->
                    <img src="image/fangka/jianrufangjian.png" alt="" @click='indexAddRoom'>
                </div>
            </div>
            <!-- 公告 -->
            <div class="index_cont_bulletin w" v-show="isBulletin">
                <img class="index_close" src="image/X.png" @click='indexClose' alt="">
                <div class="index_cont_bulletin_bor g">
                    <p>{{index.bulletinText}}</p>
                </div>
            </div>
            <!-- 代理 -->
            <div class="w index_cont_agency" v-show="isAgency">
                <img class="index_close" src="image/X.png" @click='indexClose' alt="">
                <div class="index_cont_agency_bor g">

                </div>
            </div>
            <!-- 战绩 -->
            <div class="w index_cont_military " v-show="isMilitary">
                <img class="index_close" src="image/X.png" @click='indexClose' alt="">
                <div class="index_cont_military_bor g">

                </div>
            </div>
             <!-- 帮助玩法 -->
             <div class="w index_cont_help " v-show="isHelp">
                 <img class="index_close" src="image/X.png" @click='indexClose' alt="">
                <div class="index_cont_help_bor g">

                </div>
            </div>
            <!-- 商城 -->
            <div class="index_cont_shoping" v-show="isShoping">
                <img class="index_close" style="width:7%;" src="image/X.png" @click='indexClose' alt="">
               <!-- 头部标题 -->
                <header class="index_cont_shoping_header">
                    <!-- 购买金币 -->
                    <div>
                        <img class="shopingMoneyImage" :src=index.shopingMoneyImage alt="" @click='indexMoney'> 
                        <img class="shopingRoomImage" :src=index.shopingRoomImage alt=""  @click='indexRoom'>
                    </div>
                    <div>
                        <span>拥有</span> <img style="width: 9%;position: absolute;top: 12%;" src="image/shop/jinbi/b.png" alt=""> <span class="index_shoping_header_peopleMoney">{{index.peopleMoney}}</span>
                        <img class="fang_left" src="image/shop/jinbi/faka.png"><span class="index_shoping_header_peopleRoom">{{index.peopleRoomCard}}</span>
                    </div>
               </header>
               <div class="index_cont_RoomImageC" v-show="isRoomImageC">
                   <div class="Cont_RoomImageC" v-for="(item,index) in fnagka">
                        <img :src=item.img alt="" @click='APlay(item.money)'>
                   </div>
               </div>
               <div class="index_cont_RoomImageC" v-show="isMoneyImageC">
                <div class="Cont_RoomImageC" v-for="(item,index) in jinbi">
                     <img :src=item.img alt="" @click='APlay(item.money)'>
                </div>
            </div>
            </div>
        </div>
        <script src="js/index.js"></script>
        <script src="js/data.js"></script>
    </body>
</html>